import React, {useEffect, useState} from 'react';
import {message, Modal, Select, Skeleton} from "antd";
import ProForm, {ProFormText} from "@ant-design/pro-form";
import {addUserRole, editUserRole, getUserRoleDetailData} from "@/services/userrole";


const CreateOrEdit = (props) => {

  // 从父组件的接收的数据
  const {isModalVisible, isModalShow, refs, uid, dataT} = props;

  // 添加、编辑 表单类型
  const type = uid === undefined ? "添加" : "编辑";

  // 编辑 表单数据状态
  const [initialValues, setInitialValues] = useState(undefined);

  // 编辑 渲染列表角色数据
  useEffect(async () => {
    if (uid !== undefined) {
      const getUerRoleDetail = await getUserRoleDetailData(uid)
      const role_id = getUerRoleDetail.user.roles.map(item => {
        return item.id + ''
      })
      setInitialValues({...getUerRoleDetail.user, role_id})
    }
  }, [])

  // 添加、编辑 执行提交数据
  const handleSubmit = async (data) => {
    let response = {}
    if (uid === undefined) {
      response = await addUserRole(data)
    } else {
      response = editUserRole(uid, data)
    }

    if (response.status === undefined) {
      message.success(`${type}人员成功`)
      refs.current.reload()
      isModalShow(false)
    }
  }

  return (
    <Modal
      title={type + "人员"}
      destroyOnClose={true}
      visible={isModalVisible}
      onCancel={() => isModalShow(false)}
      footer={false}
    >
      {
        initialValues === undefined && uid !== undefined ? <Skeleton active={true}/> :
          <ProForm
            onFinish={(data) => handleSubmit(data)}
            initialValues={initialValues}
            submitter={{
              searchConfig: {
                submitText: '提交',
              },
              submitButtonProps: {
                size: 'middle',
                style: {
                  width: '100%',
                },
              },
            }}
          >
            <ProFormText
              name="username"
              label="用户名"
              placeholder="请输入用户名"
              rules={[
                {
                  required: true,
                  message: '请输入用户名!',
                },
              ]}
            />
            {
              uid === undefined ? <ProFormText.Password
                name="password"
                label="密码"
                placeholder="请输入密码"
                rules={[
                  {
                    required: true,
                    message: '请输入密码!',
                  },
                ]}
              /> : null
            }
            <ProFormText
              name="nickname"
              label="昵称"
              placeholder="请输入昵称"
              rules={[
                {
                  required: true,
                  message: '请输入昵称!',
                },
              ]}
            />
            <ProForm.Item
              name="role_id"
              label="角色分配"
            >
              <Select
                mode="multiple"
                placeholder="请分配角色"
                style={{width: '100%'}}
              >
                {dataT}
              </Select>
            </ProForm.Item>
          </ProForm>
      }
    </Modal>
  );
};

export default CreateOrEdit;
